<template>
  <div class="tab_box">
    <div class="bill_condition">
      <div class="items">
        <div class="label">{{$t('m.fēnpèishíjiān')}}</div>
        <DatePicker type="daterange" :value="selectDate" format="yyyy-MM-dd" :options="disDate" ref="tabAllotTime" @on-change="allotTimeChange" v-bind:placeholder="$t('m.fēnpèishíjiān')" class="ivu-input-w200"></DatePicker>
      </div>
    </div>
    <div style="margin-top:20px;">
      <Button class="parameter_button" style="margin-right:30px;" @click="emptyQueryTab">{{$t('m.recycle')}}</Button>
      <Button class="parameter_button" type="primary" @click="queryParameter">{{$t('m.cháxún')}}</Button>
      <Poptip class="bill_box_poptip" trigger="hover" content="content" placement="bottom-end" width="50%">
        <Icon type="md-help" size="28" color="#e8eaec" />
        <div class="bill_box_poptip_centent" slot="content">
          <p>{{ $t("m.shàngqícúnliúànjiànshùjiěshì") }}</p>
          <p>{{ $t("m.shàngqíliúcúnànjiàndàicuījīnéjiěshì") }}</p>
          <p>{{ $t("m.xīnzēngànjiànshùjiěshì") }}</p>
          <p>{{ $t("m.xīnzēngànjiàndàicuījīnéjiěshì") }}</p>
          <p>{{ $t("m.chénggōngànjiànshùjiěshì") }}</p>
          <p>{{ $t("m.chénggōngànjiànhuíkuǎnjīnéjiěshì") }}</p>
          <p>{{ $t("m.shíjìhuíkuǎnjīnéjiěshì") }}</p>
          <p>{{ $t("m.zhòngfēnpèiànjiànshùjiěshì") }}</p>
          <p>{{ $t("m.zhòngfēnpèiànjiàndàicuījīnéjiěshì") }}</p>
          <p>{{ $t("m.shībàiànjiànshùjiěshì") }}</p>
          <p>{{ $t("m.shībàiànjiàndàicuījīnéjiěshì") }}</p>
          <p>{{ $t("m.shíjiānduànnèixūchǔlǐànjiànzǒngshùjiěshì") }}</p>
          <p>{{ $t("m.shíjiānduànnèixūchǔlǐànjiàndàicuījīnéjiěshì") }}</p>
          <p>{{ $t("m.shèngyúdàichǔlǐànjiànshùjiěshì") }}</p>
          <p>{{ $t("m.shèngyúdàichǔlǐànjiàndàicuījīnéjiěshì") }}</p>
          <p>{{ $t("m.dìngdāncuīhuíchénggōnglǜjiěshì") }}</p>
          <p>{{ $t("m.dìngdāncuīhuíshībàilǜjiěshì") }}</p>
          <p>{{ $t("m.zījīncuīhuíchénggōnglǜjiěshì") }}</p>
          <p class="color_hint">{{ $t("m.zhùyìjiěshì") }}</p>
        </div>
      </Poptip>
    </div>
    <div class="bill_table">
      <h4 class="title">{{$t('m.Cuīshōuzhàngdānshùliàngtǒngjì')}}</h4>
      <Table :columns="tabTable" :data="tabDataList" :loading="tabLoading">
      </Table>
    </div>

    <div class="bill_table">
      <h4 class="title">{{$t('m.cuīshōuzhàngdānjīnétǒngjì')}}</h4>
      <Table :columns="tabMoneyTable" :data="tabDataMoneyList" :loading="tabMoneyLoading">
      </Table>
    </div>
  </div>
</template>

<script>
import { formatTreeMount } from "@/libs/util";
export default {
  name: 'ActivationTabOne',
  data () {
    return {
      UserId: "",
      RemarkBox: false,
      baseInfoBox: false,
      tabPages: 1,
      tabLoading: false,
      tabMoneyLoading: false,
      selectDate:[],
      tabObj: {

        'pageNumber': 1,
        'pageSize': 10
      },
      tabTable: [
        {
          "title": this.$t('m.lèixíng'),
          "key": "stage",
          "align": 'center',
          'fixed': 'left',
          'width': 200,

        },
        {
          "title": this.$t('m.lěijìshàngqíliúcúnànjiànshù'),
          "key": "lastRemindNum",
          "sortable": true,
          "align": 'center',
          'width': 200,
        },
        {
          "title": this.$t('m.xīnzēngànjiànshù'),
          "key": "newRemindNum",
          "sortable": true,
          "align": 'center',
          'width': 200,
        },
        {
          "title": this.$t('m.chénggōngànjiànshù'),
          "key": "completeRemindNum",
          "sortable": true,
          "align": 'center',
          'width': 200,
        },
        {
          "title": this.$t('m.zhòngfēnpèiànjiànshù'),
          "key": "reallocateRemindNum",
          "sortable": true,
          "align": 'center',
          'width': 200,
        },
        {
          "title": this.$t('m.shībàiànjiànshù'),
          "key": "failedRemindNum",
          "sortable": true,
          "align": 'center',
          'width': 200,
        },
        {
          "title": this.$t('m.shíjiānduànnèixūchǔlǐànjiànzǒngshù'),
          "key": "remindTotalNum",
          "sortable": true,
          "align": 'center',
          'width': 200,
        },
        {
          "title": this.$t('m.shèngyúdàichǔlǐànjiànshù'),
          "key": "pendingRemindNum",
          "sortable": true,
          'width': 200,
          "align": 'center',
        },
        {
          "title": this.$t('m.dìngdāncuīhuílǜ'),
          "key": "completeRemindRate",
          "sortable": true,
          "align": 'center',
          'width': 200,
          render: (h, param) => {
            return h("div", param.row.completeRemindRate + '%');
          }
        },
        {
          "title": this.$t('m.dìngdānshībàilǜ'),
          "key": "failedRemindRate",
          "sortable": true,
          "align": 'center',
          'width': 200,
          render: (h, param) => {
            return h("div", param.row.failedRemindRate + '%');
          }
        }


      ],
      tabMoneyTable: [

        {
          "title": this.$t('m.lèixíng'),
          "key": "stage",
          "align": 'center',
          'width': 200,
          'fixed': 'left',

        },
        {
          "title": this.$t('m.shàngqíliúcúnànjiàndàicuījīné'),
          "key": "lastRemindUndoneAmount",
          "sortable": true,
          'width': 200,
          "align": 'center',
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.lastRemindUndoneAmount));
          }
        },
        {
          "title": this.$t('m.xīnzēngànjiàndàicuījīné'),
          "key": "newRemindUndoneAmount",
          "sortable": true,
          "align": 'center',
          'width': 200,
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.newRemindUndoneAmount));
          }
        },
        {
          "title": this.$t('m.chénggōngànjiànhuíkuǎnjīné'),
          "key": "remindAmountTobeCompleted",
          "sortable": true,
          "align": 'center',
          'width': 200,
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.remindAmountTobeCompleted));
          }
        },
        {
          "title": this.$t('m.shíjìhuíkuǎnjīné'),
          "key": "actualCompletedRemindAmount",
          "sortable": true,
          "align": 'center',
          'width': 200,
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.actualCompletedRemindAmount));
          }
        },
        {
          "title": this.$t('m.zhòngfēnpèiànjiàndàicuījīné'),
          "key": "reallocateRemindUndoneAmount",
          "sortable": true,
          "align": 'center',
          'width': 200,
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.reallocateRemindUndoneAmount));
          }
        },
        {
          "title": this.$t('m.shībàiànjiàndàicuījīné'),
          "key": "failedRemindUndoneAmount",
          "sortable": true,
          "align": 'center',
          'width': 200,
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.failedRemindUndoneAmount));
          }
        },
        {
          "title": this.$t('m.shíjiānduànnèixūchǔlǐànjiàndàicuījīné'),
          "key": "remindTotalNumUndoneAmount",
          "sortable": true,
          "align": 'center',
          'width': 200,
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.remindTotalNumUndoneAmount));
          }
        },
        {
          "title": this.$t('m.shèngyúdàichǔlǐànjiàndàicuījīné'),
          "key": "pendingRemindUndoneAmount",
          "sortable": true,
          "align": 'center',
          'width': 200,
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.pendingRemindUndoneAmount));
          }
        },
        {
          "title": this.$t('m.zījīncuīhuíchénggōnglǜ'),
          "key": "amountPushBackRate",
          "sortable": true,
          "align": 'center',
          'width': 200,
          // render: (h, param) => {
          //   return h("div", param.row.amountPushBackRate + '%');
          // }
        }
      ],
      tabDataInfo: {},
      tabDataList: [],
      tabDataMoneyList: [],
      disDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
    }
  },
  components: {},
  props: {
    tabsVal: '',
  },
  watch: {
    tabsVal (val) {
      if (val === 'name1') {
        this.queryDateEvent()
        this.queryParameter()
      }
    },
  },
  methods: {

    queryParameter () {
      this.queryTab()
      this.queryTabMoney()
    },
    queryDateEvent () {
      var d = new Date();
      let y = d.getFullYear(); // 年份
      let m = (d.getMonth() + 1).toString().padStart(2, '0'); // 月份
      let r = d.getDate().toString().padStart(2, '0'); // 日子
      let h = d.getHours().toString().padStart(2, '0'); // 小时 
      let mm = d.getMinutes().toString().padStart(2, '0'); // 分钟
      let ss = d.getSeconds().toString().padStart(2, '0'); // 秒
      this.tabObj.allotStartDate = `${y}-${m}-${r}`; // es6 字符串模板
      this.tabObj.allotEndDate = `${y}-${m}-${r}`;
      this.selectDate = [`${y}-${m}-${r}`, `${y}-${m}-${r}`]
    },

    emptyQueryTab () {
      this.tabObj = {
        'pageNumber': 1,
        'pageSize': 10
      }
      this.queryDateEvent()
      this.queryParameter()
    },
    // tab请求数据
    queryTab () {
      this.tabLoading = true
      let param = {},
        query = '';
      param.beginDate = this.tabObj.allotStartDate
      param.endDate = this.tabObj.allotEndDate
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      let url = `/api/laocai/report/remind/stage/num?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.tabDataList = res.body.result
          this.tabDataList.forEach(element => {
            if (element.stage == 'bad') {
              element.stage = element.stage + "    (" + this.$t('m.overdueDay') + "  " + element.minOverdueDays + "~~" + ")"
            } else {
              element.stage = element.stage + "    (" + this.$t('m.overdueDay') + "  " + element.minOverdueDays + "~" + element.maxOverdueDays + ")"
            }
          });
        } else {
          this.tabDataList = []
        }
        // this.$Message.success(this.$t('m.errorCode' + res.body.code));
        setTimeout(() => {
          this.tabLoading = false
        }, 500);

      });

    },

    queryTabMoney () {
      this.tabMoneyLoading = true
      let param = {},
        query = '';
      param.beginDate = this.tabObj.allotStartDate
      param.endDate = this.tabObj.allotEndDate
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      let url = `/api/laocai/report/remind/stage/amount?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.tabDataMoneyList = res.body.result
          this.tabDataMoneyList.forEach(element => {
            if (element.stage == 'bad') {
              element.stage = element.stage + "    (" + this.$t('m.overdueDay') + "  " + element.minOverdueDays + "~~" + ")"
            } else {
              element.stage = element.stage + "    (" + this.$t('m.overdueDay') + "  " + element.minOverdueDays + "~" + element.maxOverdueDays + ")"
            }
            element.amountPushBackRate = element.amountPushBackRate == null ? '0.00%' : element.amountPushBackRate + '%'
          });

        } else {
          this.tabDataList = []
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
        setTimeout(() => {
          this.tabMoneyLoading = false
        }, 500);

      });

    },
    allotTimeChange (e) {
      if (typeof (e) == "undefined") {
        this.allotStartDate = e[0];
        this.allotEndDate = e[0];
      } else if (typeof (e) == "object") {
        this.tabObj.allotStartDate = e[0];
        this.tabObj.allotEndDate = e[1];
      }
    },
  },
  filters: {},
  computed: {},
  created () { },
  mounted () { },
  destroyed () { }
}
</script>

<style lang="scss" scoped>
@import "../../static/style.css";
@import "../../static/common.scss";
.tab_box {
  overflow: hidden;
}
.bill_condition {
  margin-top: 20px;
  .items {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 20px;
    width: 200px;

    .label {
      overflow: hidden;
      white-space: inherit;
      text-align: right;
      color: #222;
      font-size: 14px;
      margin-right: 10px;
    }
  }
}
.bill_table {
  margin-top: 20px;
  margin-bottom: 30px;
  h4 {
    font-size: 16px;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: rgba(34, 34, 34, 1);
    height: 20px;
    padding-left: 8px;
    display: inline-block;
    margin-bottom: 20px;
    background: linear-gradient(
      to right,
      #2d8cf0 0%,
      #2d8cf0 3px,
      #f9f9f9 3px,
      #f9f9f9 100%
    );
  }
  .ivu-btn-long {
    margin: 6px 0;
  }
}
.bill_page {
  float: right;
}

.shenTong_tab_item {
  // background: red;
  margin-top: 20px;
  .item_Col {
    // background: #fff;
    text-align: center;
    .item_Col_box {
      height: 160px;
      margin: 12px;
      padding: 19px 30px;

      background: #f0f2f5;
      p {
        text-align: left;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
      }
      span {
        font-size: 45px;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: rgba(34, 34, 34, 1);
      }
    }
  }
}
.bill_box_poptip {
  float: right;
  position: relative;
  /* top: -10px; */
  right: 20px;
  background: #666;
  border-radius: 50%;
  .bill_box_poptip_centent {
    width: 1000px;
    /* background: rgba(70, 70, 70, 0.5) */
    p {
      margin: 10px 0;
      font-size: 14px;
      text-align: justify;
      text-justify: newspaper;
      word-break: break-all;
      color: #fff;
    }
    .color_hint {
      color: #f90;
      font-size: 16px;
    }
  }
}
.tab_box >>> .ivu-poptip-body {
  background: rgba(70, 70, 70, 0.8);
}
</style>
